<template>
<div class="main">
    <div class="all">
        <div class="infoname">数据库
        </div>
        <div class="infoA">已运行xxx日xxx时xxx分钟xxx秒</div>
        <el-button class="max" type="success">重启</el-button>
    </div>

    <div class="all">
        <div class="infoname">服务程序
        </div>
        <div class="infoA">已运行xxx日xxx时xxx分钟xxx秒</div>
        <el-button class="max" type="success">重启</el-button>
    </div>

    <div class="all">
        <div class="infoname">Web服务器
        </div>
        <div class="infoA">已运行xxx日xxx时xxx分钟xxx秒</div>
        <el-button class="max" type="success">重启</el-button>
    </div>

    <div class="all">
        <div class="infoname">系统
        </div>
        <div class="infoA">已运行xxx日xxx时xxx分钟xxx秒</div>
        <el-button class="max" type="success">重启</el-button>
    </div>
    <div class="op">
        <el-form>
            <el-form-item>
                <el-button type="info">显示日志</el-button>
                <el-button type="danger">清空日志</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div>
        <div class="form">
            <el-form label-width="80px">
                <el-form-item label="控制端口">
                    <el-input id="first" :disabled="openIsDisabled"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-button type="warning" @click="open()">修改</el-button>
    </div>

    <div class="posi">
        <div class="info">
            <div class="what">接受数据</div>
            <div class="infoB">xxxxB</div>
        </div>

        <div class="info">
            <div class="what">发送数据</div>
            <div class="infoB">xxxxB</div>
        </div>

         <div class="info">
            <div class="what">IP地址</div>
            <div class="infoB">202.112.2.34</div>
        </div>
    
        <div class="info">
            <div class="what">端口</div>
            <div class="infoB">1234</div>
        </div>

        <div class="info">
            <div class="what">状态</div>
            <div class="infoB">离线</div>
        </div>
    </div>

    <div class="time"> <div class="what">最近登录时间</div>
    <div class="infoC">2019.4.15 21:23:45</div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            openIsDisabled: true,
        }
    },
    methods: {
        open() {
            this.openIsDisabled = false;
        },
        push() {
            this.openIsDisabled = true;
        },
    },
}
</script>

<style scoped>
.time{
    display: block;
    margin-top: 100px;
    margin-left: 150px;
}
.mod {
    display: block;
    width: 60px;
    float: left;
}
.what{
    float: left;
    display: block;
    width: 100px;
    background-color: grey;
    text-align: center;
    line-height: 40px;
    height: 40px;
    margin-left: 30px;
}
.info{
    margin-top: 30px;
}

.form {
    display: block;
    float: left;
    width: 200px;
    height: 40px;
    margin: 0;
}

.op {
    margin-top: 50px;
    margin-left: 30%;
}

.main {
    display: block;
    height: 600px;
    width: 100%;
}

.all {
    margin-top: 10px;
    margin-left: 5%;
}

.infoname {
    height: 50px;
    width: 100px;
    background-color: azure;
    float: left;
    text-align: center;
    line-height: 50px;
    margin-left: 60px;
    margin-bottom: 10px;
}

.max {
    display: block;
    height: 50px;
    width: 150px;
    font-size: 20px;
    margin-left: 700px;
}

.infoA {
    height: 50px;
    width: 400px;
    background-color: blueviolet;
    float: left;
    text-align: center;
    line-height: 50px;
    margin-bottom: 10px;
}

.infoB {
    float: left;
    display: block;
    width: 100px;
    background-color:honeydew;
    text-align: center;
    line-height: 40px;
    height: 40px;
}
.infoC {
    float: left;
    display: block;
    width: 200px;
    background-color:honeydew;
    text-align: center;
    line-height: 40px;
    height: 40px;
}
</style>
